<template>
  <ElCard class="hot-act">
    <div class="title"><span class="item-icon"></span>热门活动</div>
    <a class="act-content" :href="href" target="_blank">
      <div class="content-text">
        <p class="act-title">发烧的几个雷区，你踩雷了吗？</p>
        <p class="act-content">
          孩子发烧，家长心急如焚，匆忙赶到医院，结果排队挂号、验血、再到就诊，在医院待上半宿也很常见，弄得全家身心疲惫，孩子也得不到休息。好不容易过了医院这关，回家护理起来，又不小心就踩雷，简直是实力坑娃。
        </p>
      </div>
      <div class="content-img">
        <img src="../../assets/img/hot.png" />
      </div>
    </a>
  </ElCard>
</template>

<script>
export default {
  name: 'HotAct',
  data() {
    return {
      href: 'https://mp.weixin.qq.com/s/E5kX6sk9CLSKgdDHVTtf0g'
    };
  }
};
</script>

<style lang="scss">
.hot-act {
  margin-left: 8px;
  .el-card__body {
    padding: 10px 15px;
    height: 220px;
    box-sizing: border-box;
    .title {
      font-size: 16px;
      border-bottom: 1px dashed #ededed;
      padding-bottom: 10px;
      margin-bottom: 5px;
      .item-icon {
        width: 12px;
        height: 12px;
        margin-bottom: 2px;
        margin-right: 10px;
        display: inline-block;
        border-radius: 100%;
        background-color: #4b90ff;
        vertical-align: middle;
      }
    }
    .act-content {
      font-size: 14px;
      display: flex;
      text-decoration: none;
      .content-text {
        line-height: 1.9;
        margin-right: 18px;
        padding: 15px 10px;
        width: 100px;
        flex-grow: 1;
        .act-title {
          color: #4c90ff;
          margin: 0;
        }
        .act-content {
          margin: 0;
          color: #b1b1b1;
        }
      }
      .content-img {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 140px;
        img {
          max-width: 100%;
        }
      }
      &:hover .content-text {
        border-radius: 8px;
        background-color: #ececec;
      }
    }
  }
}
</style>
